<!--
	自定义单选框
	author yjl
-->
<template>
	<view class="radio">
		<radio-group @change="change">
			<text
				:style="{
					color: labelColor
				}"
				class="small label"
			>
				{{label}}
			</text>
			<label
				v-for="(item,index) in radio"
				:key="index"
			>
				<radio
					style="transform: scale(0.8);"
					:value="item.value"
					color="#6782f1"
					:checked="item.value === value"
				/>
				<text>{{item.label}}</text>
			</label>
		</radio-group>
	</view>
</template>

<script>
export default {
  props: {
    value: {
      required: true
    },
    label: String,
    labelColor: {
      type: String,
      default: '#f8b86b'
    },
    radio: {
      type: Array,
      required: true
    },
  },
  methods: {
    change(e) {
      let val = e.target.value

      /* 格式转换 */
      if (typeof this.value === 'boolean') {
        val = val === 'true'
      } else if (typeof this.value === 'number') {
        val = Number(val)
      }
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.radio {
  margin: 10px 0;
  font-size: 22rpx;

  text {
    margin-right: 10px;
  }
}
</style>

